<template>
  <div class="bt">
    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" success-text="刷新成功">
      <!-- 商品列表 -->
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"
      :offset='100'>
        <!-- 商品展示列表 -->
        <van-cell v-for="item in list" :key="item.id" :to="'/goods/detail/'+item.id">
          <template>
            <!-- lazy-load开启图片懒加载 -->
            <van-image class="box" height="100" fit="contain" :src="item.img_url" lazy-load />
            <!-- van-multi-ellipsis--l2  vant提供的内置样式 -->
            <p class="sty van-multi-ellipsis--l2">{{item.title}}</p>
            <div class="box2">
              <div class="box3">
                <span>￥{{item.sell_price}}</span>
                <s>￥{{item.market_price}}</s>
              </div>
              <div class="box4">
                <span>热卖中</span>
                <span>剩{{item.stock_quantity}}件</span>
              </div>
            </div>
          </template>
        </van-cell>
      </van-list>
    </van-pull-refresh>

  </div>
</template>
<script>
export default {
  created () {
    this.getList()
  },
  data () {
    return {
      list: [],
      // 下拉刷新
      refreshing: false,
      // 上拉加载
      loading: false,
      // 上拉加载完毕
      finished: false,
      // 用于获取数据列表的页码
      page: 0
    }
  },
  methods: {
    // 获取商品列表
    async getList () {
      const { data: res } = await this.$axios.get(`/api/getgoods?pageindex=${this.page}`)
      // 如果当前的页码是1 代表是请求数据 不是下拉加载
      if (this.page === 1) {
        this.list = res.message
        return
      }

      // 否则就是下拉加载更多数据
      this.list = this.list.concat(...res.message)
      // console.log(res)
    },
    // 下拉刷新触发的事件
    onRefresh () {
      setTimeout(() => {
        // 判断是否进行过上拉加载  如果有就重置page的值
        if (this.page >= 2) this.page = 1
        this.getList()
        // 把上拉加载完毕 设置为false 这样 下拉能继续触发onload事件
        this.finished = false
        // 下拉刷新完成
        this.refreshing = false
      }, 500)
    },
    // 当滚动条与底部距离小于 offset 时触发  页面一加载也会触发一次
    onLoad () {
      console.log('触发了')
      // 让页码自增
      this.page++
      // 获取第二页的数据
      this.getList()
      // 开始上拉加载
      this.loading = false

      // console.log(this.list)
      // 当page>1 说明获取的是第二页及以上的数据 代表上拉加载完毕
      if (this.page > 1) {
        // 将finished设置为true 不在触发 onload事件
        this.finished = true
      }
      console.log(this.page)
    }
  }
}
</script>
<style scoped lang="less">
.van-list{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 10px;
  padding-bottom: 50px;
}
.van-cell{
  width: 48% !important;
  border: 1px solid #ccc;
  margin: 10px 0;
  padding: 0 !important;
  align-content: space-between;
}
.van-image{
  min-height: 180px;
  padding: 10px;
}
.sty{
  font-size: 14px;
  color: #000;
  text-align: left;
  padding: 4px 10px;
  height: 49px;
}
.box2{
    width: 100%;
    background: #eee;
    padding: 5px 0;
    font-size: 14px;
    color: #323233;
    .box3{
        text-align: left;
        padding: 0 10px;
        span{
            font-size: 16px;
            color: red;
            margin-right: 15px;
        }
    }
    .box4{
        display: flex;
        justify-content: space-between;
        padding: 0 10px;
    }
}
.van-list__finished-text{
  width: 100%;
}
</style>
